<template>
	<view class="bg-w">
		<unio2o-tab @select="selectAct" :tabs="tabs" :selectIndex="selectIndex"></unio2o-tab>
		<view class="exchange-main-h">
			<swiper class="exchange-main-h" :current="selectIndex" @change="selectSwiper" :autoplay="false" :indicator-dots="false">
				<swiper-item>
					<view class="pd30">
						<view class="box-shadow mb30 pd30 bdr16 bg-w">
							<view class="flex space">
								<view class="flex ws80">
									<image class="wh30 bdr8 box-shadow" :src="''"></image>
									<view class="ml30">
										<view class="flex alcenter">
											<view class="store-name text-over ft16 ftw600 text-default">卡夫卡少儿艺术培卡夫卡少儿艺术培…</view>
											<view class="iconfont iconbtn_arrowr text-default ml10"></view>
										</view>
										<view class="text-notice ft14 mt20">2019-09-12 12:00</view>
									</view>
								</view>
								<view  class="w80 ft16 text-theme text-right">待自提</view>
							</view>
							<view class="line mt30 mb30 opacity5"></view>
							<navigator url="/pages/member/integral/order">
							<view class="flex">
								<view class="wh80">
									<image class="wh80 bdr8" :src="''"></image>
								</view>
								<view class="ws80 pl30">
									<view class="ft16 text-main">得力炫彩棒蜡笔旋转油画棒…</view>
									<view class="ft14 text-notice mt20">
										兑换：1
									</view>
									<view class="flex alcenter mt20">
										<image class="wh20" :src="'icon_diamond'"></image>
										<text class="ml10 ft14 text-theme ftw600">1000 + ￥200</text>
									</view>
								</view>
							</view>
							</navigator>
							<view class="line mt30 mb30 opacity5"></view>
							
							<view class="flex end">
								<view class="btn-small-empty">导航前往</view>
								<navigator url="/pages/member/integral/order">
								<view class="btn-small-empty ml20">查看券码</view>
								</navigator>
							</view>
						
						</view>
						<view class="box-shadow mb30 pd30 bdr16 bg-w">
								<view class="flex space">
									<view class="flex ws80">
										<image class="wh30 bdr8 box-shadow" :src="''"></image>
										<view class="ml30">
											<view class="flex alcenter">
												<view class="store-name text-over ft16 ftw600 text-default">卡夫卡少儿艺术培卡夫卡少儿艺术培…</view>
												<view class="iconfont iconbtn_arrowr text-default ml10"></view>
											</view>
											<view class="text-notice ft14 mt20">2019-09-12 12:00</view>
										</view>
									</view>
									<view  class="w80 ft16 text-theme text-right">过期已退款</view>
								</view>
								<view class="line mt30 mb30 opacity5"></view>
								<view class="flex">
									<view class="wh80">
										<image class="wh80 bdr8" :src="''"></image>
									</view>
									<view class="ws80 pl30">
										<view class="ft16 text-main">得力炫彩棒蜡笔旋转油画棒…</view>
										<view class="ft14 text-notice mt20">
											兑换：1
										</view>
										<view class="flex alcenter mt20">
											<image class="wh20" :src="'icon_diamond'"></image>
											<text class="ml10 ft14 text-theme ftw600">1000 + ￥200</text>
										</view>
									</view>
								</view>
							</view>
						
					</view>
				</swiper-item>
				<swiper-item>
					<view class="pd30">
						<view class="box-shadow mb30 pd30 bdr16 bg-w">
							<view class="flex space">
								<view class="flex ws80">
									<image class="wh30 bdr8 box-shadow" :src="''"></image>
									<view class="ml30">
										<view class="flex alcenter">
											<view class="store-name text-over ft16 ftw600 text-default">卡夫卡少儿艺术培卡夫卡少儿艺术培…</view>
											<view class="iconfont iconbtn_arrowr text-default ml10"></view>
										</view>
										<view class="text-notice ft14 mt20">2019-09-12 12:00</view>
									</view>
								</view>
								<view  class="w80 ft16 text-theme text-right">待核销</view>
							</view>
								<view class="line mt30 mb30 opacity5"></view>
							<view class="flex">
								<view class="wh80">
									<image class="wh80 bdr8" :src="''"></image>
								</view>
								<view class="ws80 pl30">
									<view class="ft16 text-main">得力炫彩棒蜡笔旋转油画棒…</view>
									<view class="ft14 text-notice mt20">
										兑换：1
									</view>
									<view class="flex alcenter mt20">
										<image class="wh20" :src="'icon_diamond'"></image>
										<text class="ml10 ft14 text-theme ftw600">1000 + ￥200</text>
									</view>
								</view>
							</view>
							<view class="line mt30 mb30 opacity5"></view>
							
							<view class="flex end">
								<view class="btn-small-empty ml20">查看券码</view>
							</view>
						
						</view>
						
					</view>
				</swiper-item>
				<swiper-item>
					<view class="pd30">
						<view class="mb50">
							<unio2o-coupon-item :showStore="false"></unio2o-coupon-item>
						</view>
						<view class="mb50">
						<unio2o-coupon-used  :showStore="false"></unio2o-coupon-used>
						</view>
						<view class="mb50">
							<unio2o-coupon-expire></unio2o-coupon-expire>
						</view>
					</view>
				</swiper-item>
			</swiper>		
		</view>
	</view>
</template>

<script>
	import unio2oTab from '@/components/base/tab/tab.vue';
	import unio2oCouponItem from '@/components/module/coupon/myitem.vue';
	import unio2oCouponUsed  from '@/components/module/coupon/used.vue';
	import unio2oCouponExpire from '@/components/module/coupon/expire.vue';
	export default{
		components:{
			unio2oTab,
			unio2oCouponItem,
			unio2oCouponUsed,
			unio2oCouponExpire
		},
		data(){
			return {
				isLogin:true,
				selectIndex:0,
				tabs:[
					{name:'商品'},
					{name:'抢购'},
					{name:'优惠券'}
				],
			}
		},methods:{
			selectAct(e){
			   let index = parseInt(e);
			   this.selectIndex = index;		
			},
			selectSwiper(e){
				this.selectIndex = e.detail.current;
			}
		}
	}
</script>

<style>
.exchange-main-h{
	height: calc(100vh - 100rpx);
}
.store-name{
	width: 330rpx;
}
</style>